<template>
  <div class="base-container">
    <t-list :split="true">
      <t-list-item v-for="(item, idx) in data" :key="idx" class="list-item">
        <span class="file-title">{{ item.title }}</span>
        <template #action>
          <t-space class="btns">
            <t-button variant="outline" theme="primary" size="small" @click="openFile(item.sysAttMainEntities)">打开帮助文件
            </t-button>
            <t-button variant="outline" theme="primary" size="small" @click="downloadFile(item.sysAttMainEntities)">
              下载帮助文件
            </t-button>
          </t-space>
        </template>
      </t-list-item>
    </t-list>
  </div>
</template>

<script>
export default {
  name: 'help',
  data() {
    return {
      data: [],
      tabValue: 'zh',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$api.system.help.list({
        pageNum: 1,
        pageSize: 1000,
        isShow: '1'
      }).then(response => {
        this.data = response.rows;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    openFile(files) {
      if (files.length <= 0) {
        this.$message.error('附件不存在');
        return;
      }
      const elink = document.createElement('a')
      elink.href = files[0].fullFilePath;
      elink.setAttribute('target', '_blank')
      elink.style.display = 'none'
      document.body.appendChild(elink)
      setTimeout(() => {
        elink.click()
        document.body.removeChild(elink)
      }, 66)
    },
    downloadFile(files) {
      if (files.length <= 0) {
        this.$message.error('附件不存在');
        return;
      }
      const elink = document.createElement('a')
      elink.href = files[0].fullFilePath;
      elink.setAttribute('download', files[0].fileName)
      elink.setAttribute('target', '_blank')
      elink.style.display = 'none'
      document.body.appendChild(elink)
      setTimeout(() => {
        elink.click()
        document.body.removeChild(elink)
      }, 66)
    },
  }
};
</script>

<style lang="less" scoped>
.list-item {
  user-select: none;

  &:hover {
    background-color: var(--td-bg-color-container-hover);
  }
}

.file-title {
  font-size: 18px;
  font-weight: 500;
}

.btns {
  margin-left: 100px;
}
</style>
